<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding:0px;
				margin:0px;
				cursor:pointer;
			}
			.title{
				font-size: 15px;
				color:#0087FF;
				margin-bottom:5px;
			}
			.container{
				width:700px;
				margin:0 auto;
				height: 500px;
				/* background: #dedede; */
				padding:10px;
			}
			.tab{
				width:100%;
				height: 30px;
				background: #F5F5F5;
			     position: relative;
			}
			ul{
				display: flex;
				list-style: none;
				padding: 0 5px;
			}
			.tab ul >li{
				text-align: center;
				width:50px;
				height: 30px;
				color:#ABABAB;
				font-size: 13px;
				line-height: 30px;
				
			}
			.current{
				background: #0087FF;
				color:#fff!important;
			}
			.log{
				position: absolute;
				right:0px;
				top:0px;
				height: 100%;
				box-sizing:border-box;
			}
			.log >i{
				display: inline-block;
				width:20px;
				height: 30px;
				background: #000;
				margin-right:5px;
			}
			.log >i:first-child{
			  background:url(img/add.png) no-repeat center center;
			}
			.log >i:last-child{
				background:url(img/del.png) no-repeat center center;
			}
			.content{
				margin-top:10px;
			}
			.content label{
				font-size: 10px;
				color:#000;
				width:75px;
				line-height: 25px;
				text-align: left;
			}
			.line{
				display: flex;
				margin-top:10px;
				position: relative;
			}
			.line input,select{
				width:100%;
				height:25px;
			}
			
			.line input{
					padding-right:40px;
					box-sizing: border-box;
			}
			.lineBox,.lineB{
				display: flex;
				}
				.lab{
					width:150px!important;
				}
				.lineBox >.line{
					flex: 1;
				}
				.lineBox >.line:first-child{
					margin-right:10px;
				}
				.lineBox >.line:first-child>label{
					margin-right:9px;

				}
				.lineB >.line>label{
					width:98px!important;
					margin-left:10px!important;
				}
				.lineB >.line:first-child>label{
					margin-left:0px!important;
					margin-right:5px;
				}
				select{
					height: 23px;
				}
				.content{
					display:none;
				}
				.danW{
					position: absolute;
					font-size: 14px;
					    right: -5px;
                       top: 2px;
				}
				.danW>i{
					font-size: 8px;
					vertical-align: text-top;
					font-style: normal;
					margin-left:-5px;
				}
		</style>
	</head>
	<body>
		<div class='container'>
			<div class="title">
				<span>企业信息</span>
			</div>
			<div class="tab">
				<ul class='tablist'>
					<li class="current">房屋<span>1</span></li>
				</ul>
				<div class="log">
					<i class="add"></i>
					<i class="del"></i>
				</div>
			</div>
			<div class="content">
				<div class="line1 line"><label for="">*所属网格1:</label><input type="text"></div>
				<div class="line1 line"><label for="">*房屋1编号:</label><input type="text"></div>
				<div class="line1 line"><label for="">*房屋1地址:</label><input type="text"><span></span></div>
				<div class="lineBox">
					<div class="line"><label for="">*建成年份:</label><input type="text"></div>
					<div class="line"><label class="lab" for="">*本户建筑面积:</label><input type="text"><span class="danW">（m <i>2</i>）</span></div>
				</div>
				<div class="lineB">
					<div class="line"><label for="">*占地面积:</label><input type="text"><span class="danW">（m <i>2</i>）</span></div>
					<div class="line"><label for="">*合法面积:</label><input type="text"><span class="danW">（m <i>2</i>）</span></div>
					<div class="line"><label for="">*违法面积:</label><input type="text"><span class="danW">（m <i>2</i>）</span></div>
				</div>
				<div class="lineBox">
					<div class="line"><label for="">*房屋结构:</label><select name="" id="">
							<option value="">请选择</option>
							<option value="">信访政务</option>
							<option value="">政府业务</option>
							<option value="">平民政务</option>
							<option value="">学校政务</option>
						</select></div>
					<div class="line"><label for="">*房屋用途:</label><select name="" id="">
							<option value="">请选择</option>
							<option value="">信访政务</option>
							<option value="">政府业务</option>
							<option value="">平民政务</option>
							<option value="">学校政务</option>
						</select></div>
				</div>
				<div class="lineBox">
					<div class="line"><label for="">*房屋类型:</label><select name="" id="">
							<option value="">请选择</option>
							<option value="">信访政务</option>
							<option value="">政府业务</option>
							<option value="">平民政务</option>
							<option value="">学校政务</option>
						</select></div>
					<div class="line"><label for="">*处置方式:</label><select name="" id="">
							<option value="">请选择</option>
							<option value="">信访政务</option>
							<option value="">政府业务</option>
							<option value="">平民政务</option>
							<option value="">学校政务</option>
						</select></div>
				</div>
			</div>

		</div>


	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		$(".content").eq(0).css({'display':'block'});
		localStorage.setItem("id","0");
		
		$(document).on('click','.tablist>li',function(){
			var index=$(this).index();
			localStorage.setItem("id",index);
			$(this).addClass("current");
			$(this).siblings().removeClass("current");
			$(".content").css({'display':'none'});
			$(".content").eq(index).css({'display':'block'});
		});
			
		$(document).on("click",'.add',function(){
		     var length=$(".tablist>li").length;
			if(length<10){
				
				var s=localStorage.getItem("id");
				var liB=`<li>房屋<span></span></li>`;
				$(".tablist").append(liB);
				var ht=$('.content').html();
				var html=`<div class="content">${ht}</div>`;
				$(".container").append(html);
				var length=$(".tablist>li").length;
				for(var i=0;i<length;i++){
					$(".tablist>li>span").eq(i).html(i+1);
				}
			}else{
				alert("只能加9个房屋哦！");
			}
		})
		
		$('.del').click(function(){
			var length=$(".tablist>li").length;
			if(length>1){
				var s=localStorage.getItem("id");
				$(".tablist>li").eq(s).remove();
				$(".tablist>li").eq(0).addClass('current');
				localStorage.setItem("id",0);
				length--;
				$(".content").eq(s).remove();
					$(".content").eq(0).css({'display':'block'});
			      for(var i=0;i<length;i++){
					$(".tablist>li>span").eq(i).html(i+1);
					}
			}else{
				alert("最后一个不能删了！");
			}
			
		})
	</script>
</html>
